<template>
  <view class="container">
    <scroll-view class="goods-list">
      <view class="cart">
        <u-swipe-action>
          <u-swipe-action-item
            :options="options"
            v-for="item in cartList"
            :name="item.skuId"
            :key="item.skuId"
            @click="swiperItemClick"
          >
            <view class="cart-item">
              <radio
                style="transform: scale(0.8)"
                :checked="item.selected"
                color="#09bb07"
                @click="changeSelect(item.skuId)"
              />
              <view class="cart-count">
                <u-number-box
                  :size="15"
                  :input-height="15"
                  :input-width="35"
                  @change="changeCount"
                  :value="item.count"
                  :name="item.skuId"
                  @overlimit="overLimit($event, item.skuId)"
                />
              </view>
              <navigator
                class="goods-item"
                hover-class="none"
                :url="`/pages/goods/index?id=${item.goodsId}`"
              >
                <image
                  class="goods-image"
                  :src="item.skuImage"
                  mode="aspectFit"
                />
                <view class="goods-info">
                  <view class="goods-name">{{ item.name }}</view>
                  <view class="goods-introduce">{{ item.skuValue }}</view>
                  <view class="goods-price">{{ item.skuPrice }}</view>
                </view>
              </navigator>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
      </view>
    </scroll-view>

    <view class="bottom-bar-fixed">
      <view class="select">
        <radio
          class="select-radio"
          color="#09bb07"
          :checked="isAllSelected"
          @click="toggleAllSelected"
        >
          全选
        </radio>
        <text class="select-radio"></text>
      </view>
      <view class="total">
        <text class="total-name">合计：</text>
        <text class="total-price">{{ price }}</text>
      </view>

      <view class="account" @click="Go_Settlement">去结算({{ count }})</view>
    </view>
    <u-empty mode="car" v-if="false">
      <navigator
        url="/pages/index/index"
        open-type="switchTab"
        hover-class="none"
      >
      </navigator>
    </u-empty>
  </view>
</template>

<script>
export default {
  name: 'gouwuche',
  data () {
    return {
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#f56c6c'
          }
        }
      ]
    }
  },
  methods: {
    deleteGoods (id) {
      const index = this.cartList.findIndex(item => item.skuId === id)
      this.cartList.splice(index, 1)
      this.$store.commit('shopList/getCartList', this.cartList)
    },
    swiperItemClick (payload) {
      this.deleteGoods(payload.name)
    },
    changeSelect (id) {
      this.cartList.forEach(item => {
        if (item.skuId === id) {
          item.selected = !item.selected
        }
      })
      this.$store.commit('shopList/getCartList', this.cartList)
    },
    changeCount (data) {
      this.cartList.forEach(item => {
        if (item.skuId === data.name) {
          item.count = data.value
        }
      })
      this.$store.commit('shopList/getCartList', this.cartList)
    },
    toggleAllSelected () {
      const isAllSelected = !this.isAllSelected
      this.cartList.forEach(item => {
        item.selected = isAllSelected
      })
      // 更新vuex
      this.$store.commit('shopList/getCartList', this.cartList)
    },
    async overLimit (type, skuId) {
      if (type === 'minus') {
        const [error, res] = await uni.showModal({
          title: '温馨提示',
          content: '确定要删除该商品吗？',
          confirmText: '删除',
          confirmColor: '#f00'
        })
        if (res.confirm) {
          this.deleteGoods(skuId)
        }
      }
    },
    // 去结算
    Go_Settlement () {
      // console.log(this.price)
      if (this.price <= 0) {
        uni.showToast({
          title: '请勾选商品后结算~',
          icon: 'none'
        })
      } else {
        uni.navigateTo({
          url: '/pages/order/create_order/index'
        })
      }
    }
  },
  computed: {
    cartList () {
      return JSON.parse(JSON.stringify(this.$store.state.shopList.cartList))
    },
    isAllSelected () {
      return this.$store.getters['shopList/isAllSelected']
    },
    count () {
      return this.$store.getters['shopList/count']
    },
    price () {
      return this.$store.getters['shopList/price']
    }
  }
}
</script>

<style lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goods-list {
  background-color: #f0f0f0;
  flex: 1;
  .cart {
    padding: 30rpx 20rpx;
  }
  .goods-item {
    display: flex;
    padding: 25rpx;
    .goods-image {
      width: 170rpx;
      height: 170rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      height: 170rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 20rpx;
      .goods-name {
        font-size: 26rpx;
        color: #444;
      }
      .goods-introduce {
        font-size: 24rpx;
        color: #888;
      }
      .goods-price {
        color: #444444;
        font-size: 26rpx;
        // 前面的价格符号
        &::before {
          content: '￥';
          margin-right: 2rpx;
        }
      }
    }
  }
}
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  &:last-child {
    border-bottom: none;
  }
  .cart-count {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 20px;
  }
}
.bottom-bar-fixed {
  height: 118rpx;
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: 0;
  bottom: 50px;
  border-top: 1px solid #eee;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 10px;

  .select {
    .select-radio {
      font-size: 30rpx;
      color: #000000;
    }
  }

  .total {
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 40rpx;
    .total-name {
      font-size: 28rpx;
    }

    .total-price {
      color: #eb4450;
      font-size: 36rpx;
      &::before {
        content: '￥';
        font-size: 20rpx;
        margin-right: 5rpx;
      }
    }
  }

  .account {
    background-color: #27ba9b;
    color: #fff;
    font-size: 26rpx;
    width: 240rpx;
    height: 72rpx;
    line-height: 72rpx;
    border-radius: 72rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
